$themeColor: var(--themeColor, #2395ff);
$fontColor1: #333333;
$fontColor2: #666666;
$fontColor3: #999999;
$fontColor4: #3f3f3f;

/*
  * 设置宽高
  *    width   宽度
  *    $height 高度
  */
@mixin num($width: 100%, $height: 100%) {
  width: $width;
  height: $height;
}

/*
  * flex布局
  *     $direction      方向默认水平 row=水平 column=垂直
  *     $alignItems     根据方向 来决定 横轴 或 竖轴的位置 option: flex-start center flex-end
  *     $justifyContent 根据方向 来决定 横轴 或 竖轴的位置 option: flex-start center flex-end
  */
@mixin flexVertical($alignItems: initial, $justifyContent: initial, $direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: $alignItems;
  justify-content: $justifyContent;
}

/*
  * 设置背景
  *     $url        图片地址
  *     $width      背景占容器的宽度 默认100%
  *     $height     背景占容器的高度 默认100%
  *     $color      背景颜色 默认为 ''
  */
@mixin backgroundFn($url, $width: 100%, $height: 100%, $color: transparent) {
  background: $color url($url) no-repeat center;
  background-size: $width $height;
}

// 文字溢出隐藏
@mixin fontHiddenOne() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 文字溢出隐藏（多行文字）
@mixin fontHiddenMany($num: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $num; //第几行换行
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
  按钮点击时的波纹效果
*/
.btnRipple {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10.1%);
    background-repeat: no-repeat;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.3s, opacity 0.4s;
  }
  &:active::after {
    transform: scale(0, 0);
    opacity: 0.4;
    transition: 0s;
  }
}
